{include file="public/header" $title="菜单列表" /}
    <style>
        #editBox{
            width: 400px;display: none;
        }
    </style>
</header>
<body>

<div class="layui-btn-group my-toolbar">
    <button class="layui-btn layui-bg-blue" data-type="addMenu">添加菜单</button>
    <button class="layui-btn layui-bg-red" data-type="getCheckData">批量删除</button>
</div>

<script type="text/html" id="switchTpl">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="开|关" lay-filter="statusDemo" {{ d.status==1 ? 'checked' : '' }}>
</script>


<table class="layui-hide" id="table" lay-filter="table"></table>

<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div id="editBox">
    <form class="layui-form" action="" style="height: 100%;margin-top: 30px">
        <div class="layui-inline layui-form-item">
            <label class="layui-form-label">父级分类</label>
            <div class="layui-input-inline">
                <select name="pid">
                    <option value="0" data-lev="0"  class="pid">顶级</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入菜单名称" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">模块</label>
            <div class="layui-input-block">
                <input type="text" name="module"  autocomplete="off" placeholder="请输入模块" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">控制器</label>
            <div class="layui-input-block">
                <input type="text" name="controller"  autocomplete="off" placeholder="请输入控制器" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">方法</label>
            <div class="layui-input-block">
                <input type="text" name="action"  autocomplete="off" placeholder="请输入方法" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单分类</label>
            <div class="layui-input-block">
                <input type="radio" name="d_type" value="0" title="只作为菜单" >
                <input type="radio" name="d_type" value="1" title="只作为操作" >
                <input type="radio" name="d_type" value="2" title="同时为菜单和操作" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF" id="status">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="gosub" type="button">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <input type="hidden" value="" name="id">
    </form>
</div>

</body>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#table'
            ,url:"{:url('nadmin/menu/getMenuList')}"
            ,title:'系统菜单'
            ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field:'id', width:80, title: 'ID',unresize: true, sort: true,align:'center'}
                ,{field:'title', width:200, title: '菜单名',align:'center'}
                ,{field:'module', title: '模块', sort: true ,width:300,align:'center'}
                ,{field:'controller', title: '控制器', sort: true ,width:300,align:'center'}
                ,{field:'action', title: '方法', sort: true ,width:300,align:'center'}
                ,{field:'d_type', title: '分类', sort: true ,align:'center',width:300,templet:'<div>{{d.d_type == 0?"只作为菜单":d.d_type == 1?"只作为操作":"同时为菜单和操作"}}</div>'}
                ,{field:'status', width:150, title: '状态',templet: '#switchTpl', unresize: true,align:'center'}
                ,{field:'ctime',width:200, title: '创建时间',align:'center'}
                ,{field:'sort',width:100, title: '排序',edit:true,sort:true,align:'center'}
                ,{fixed: 'right', title:'操作',width:200, align:'center', toolbar: '#barDemo'}
            ]]
            ,page: true
            ,limit:10
            ,id:'menuTable'
            ,loading:true

        });
        //监听表格复选框选择
        /*table.on('checkbox(books)', function(obj){
         console.log(obj)
         });*/
        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('menuTable')
                        ,data = checkStatus.data;
                //将选择的对象id收集
                var idArr = [];
                $(data).each(function(index,element){
                    idArr[index] =  element.id;
                })

                if(idArr){
                    var idStr = idArr.join(',')
                    //二次询问
                    layer.msg('你确定全部删除么？', {
                        time: 0 //不自动关闭
                        ,btn: ['必须啊', '想一哈']
                        ,yes: function(index){
                            layer.close(index);
                            $.post("{:url('nadmin/menu/delMore')}",{idStr:idStr},function(datas){
                                if(datas.status==1){
                                    layer.msg(datas.msg,{icon:1})
                                    //刷新
                                    table.reload('menuTable', {});
                                }else{
                                    layer.msg(datas.msg,{icon:2})
                                }
                            },'json');
                        }
                    });
                }else{
                    //没有数据
                    layer.msg('请先选择数据',{icon:5})
                }
            },

            //添加菜单
            addMenu:function()
            {
                menuCate(0);
                $('[name="title"]').val("");
                $('[name="module"]').val("");
                $('[name="controller"]').val("");
                $('[name="action"]').val("");
                $('[name="id"]').val("");
                $("[name='d_type'][value='0']").attr("checked",true);
                $('#status').attr("checked",false)

                form.render() //刷新表单
                layer.open({
                    type:1,
                    title:'添加菜单',
                    area: ['410px', '580px'],
                    skin:'layui-layer-rim',//加上边框
                    content:$("#editBox")
                })
            },


        };

        $('.my-toolbar .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });



        //监听行工具事件
        table.on('tool(table)', function(obj){

            var data = obj.data;
            var id = data.id;

            //删除一条记录
            if(obj.event === 'del'){
                layer.confirm('真的删除此行么', function(index){
                    $.post("{:url('nadmin/menu/delOne')}",{id:id},function(datas){
                        if(datas.status==1){
                            layer.msg(datas.msg,{icon:1});
                            obj.del();
                            layer.close(index);
                        }else {
                            layer.msg(datas.msg,{icon:2});
                        }
                    },'json')

                });
            } else if(obj.event === 'edit'){
                    menuCate(data.pid);
                    $('[name="title"]').val(data.title);
                    $('[name="module"]').val(data.module);
                    $('[name="controller"]').val(data.controller);
                    $('[name="action"]').val(data.action);
                    $('[name="id"]').val(data.id);
                    $("[name='d_type'][value='"+data.d_type+"']").attr("checked",true);
                    if(data.status == 1){
                        $('#status').attr("checked",true)
                    }else{
                        $('#status').attr("checked",false)
                    }
                    form.render() //刷新表单
                    layer.open({
                        type:1,
                        title:'编辑菜单',
                        area: ['410px', '580px'],
                        skin:'layui-layer-rim',//加上边框
                        content:$("#editBox")
                    })
            }
        });

        //监听状态操作
        form.on('switch(statusDemo)', function(obj){
            /*layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);*/
            /*console.log(obj.elem.checked);*/
            var that = this;
            if(!this.value){
                layer.msg('参数异常',{icon:2});
            }
            if(obj.elem.checked){
                var status = 1;
            }else{
                var status = 0;
            }
            $.post("{:url('nadmin/menu/changeStatus')}",{id:this.value,status:status},function(datas){
                layer.msg(datas.msg);
                if(datas.status == 0){
                    $(that).attr("checked",false);
                }
            },'json')
        });

        //添加或编辑操作
        form.on('submit(gosub)',function(data){

            if(data.field.status == 'on'){
                data.field.status = 1;
            }else{
                data.field.status = 0;
            }
            data.field.lev = $(".pid:selected").data("lev");
            if(data.field.id)
            {
                var url = "{:url('nadmin/menu/doEdit')}";
            }else{
                var url = "{:url('nadmin/menu/doAdd')}";
            }

            $.post(url,data.field,function(datas){
                layer.msg(datas.msg,{time:1000},function(){
                    if(datas.status == 1){
                        //关闭弹框
                        layer.closeAll()
                        table.reload('menuTable', {}); //表格重载
                        form.render();
                    }
                });

            },'json')
        })


        table.on('edit(table)', function(obj){

            var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段

            $.post("{:url('nadmin/menu/editSort')}",{id:data.id,sort:value},function(datas){
                if(datas.statua==1){
                    layer.msg(datas.msg);
                    table.reload('menuTable',{});
                }else{
                    layer.msg(datas.msg)
                }
            },'json')
        });
         //填充分类数据
        function menuCate(pid)
        {
            if($('[name="pid"]').children().length < 2) {
                $.get("{:url('nadmin/menu/getMenuCate')}", {}, function (obj) {
                    if (obj.status == 1) {
                        var html = "";
                        for (var i = 0; i < obj.data.length; i++) {
                            html += '<option  value="' + obj.data[i].id + '" data-lev="' + obj.data[i].lev + '" class="pid" >' + obj.data[i].title + '</option>';
                        }
                        $('[ name="pid"]').append(html);
                        form.render()
                    }
                }, 'json')
            }
            $(".pid[value='"+pid+"']").siblings().attr("selected",false)
            $(".pid[value='"+pid+"']").attr("selected",true);
            form.render()
        }

    });
</script>
</html>